<template>
  <div class="user-info bsb" :class="[isComponent ? 'vh100' : 'h100', '' + isComponent]">
    <div class="vipInfo">
      <div class="user clearfix">
        <img class="ego fl" :src="userInfo.icon || defaultIcon" alt=""/>
        <div class="name flex-col h100 jce">
          <template v-if="userInfo.uid">
            <div class="username">{{ wxUserInfo.nickname }}</div>
            <div class="Uid">(帐号ID:{{ userInfo.username }})</div>
            <div v-if="userInfo.phone" class="Uid Tel">手机号:{{ userInfo.phone }}</div>
          </template>
          <div class="username" v-else @click="toLogin()">点击登录</div>
        </div>
      </div>
      <div class="openVip por">
        <div class="crown">
          <img :src="srcPath + 'personal_icon_vip.png'" class="vat ico"/>
          <span>VIP会员</span>
        </div>
        <div class="remark">{{ userInfo.concise_remind || '开通会员，畅想所有课程服务' }}</div>
        <div class="vipButton tac abs-m"
             @click="linkTo('/payvip/' + productInfo.product_id)">
          {{ userInfo.is_vip ? '立即续费' : '立即开通' }}
        </div>
      </div>
    </div>
    <ul class="my">
      <li class="item por"
          :class="{'has-top': item.hasTop}"
          v-for="(item, index) in myIcon"
          :key="index"
          @click="linkTo(item.path)">
        <div v-if="item.title === '绑定手机' && userInfo.phone !== ''">
          <img :src="srcPath + 'icon_bdsj.png'" class="fl ico abs-m"/>
          <div class="item-name">更换手机</div>
        </div>
        <div v-else>
          <img :src="srcPath + item.icon" class="fl ico abs-m"/>
          <div class="item-name">{{ item.title }}</div>
        </div>
      </li>
    </ul>
    <div class="logOutBtn tac" v-show="userInfo.uid" @click="logOutEvent">退出登录</div>
  </div>
</template>

<script>
  import { mapGetters, mapMutations } from 'vuex';

  export default {
    name: 'Mine',
    props: {
      isComponent: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        srcPath: './static/images/mipmap_xhdpi/',
        myIcon: [
          {
            icon: 'personal_icon_collection.png',
            title: '我的收藏',
            path: '/mycollect'
          },
          {
            icon: 'personal_icon_playback.png',
            title: '播放记录',
            path: '/playrecord'
          },
          {
            icon: 'personal_icon_order.png',
            title: '我的订单',
            path: '/myorder'
          },
          { icon: 'icon_prize.png', title: '有奖兑换', path: '/exchange', hasTop: true },
          { icon: 'icon_bdshouji.png', title: '绑定手机', path: '/bind', hasTop: true }
        ]
      };
    },
    computed: {
      ...mapGetters(['userInfo', 'wxUserInfo', 'productInfo', 'defaultIcon'])
    },
    methods: {
      ...mapMutations(['setUserInfo', 'setIsLogin', 'setWxUserInfo', 'setLoginThenPath']),

      // 跳转登录页面
      toLogin(router = this.$route.fullPath) {
        this.util
          .login('', router)
          .then(userInfo => {
            this.wxUserInfo.is_register = true;
            this.setWxUserInfo(this.wxUserInfo);
            this.util.login().catch(console.log);
          })
          .catch(err => {
            typeof err !== 'string' && this.$err(err);
          });
      },

      //科目导航点击跳转
      linkTo(path, to) {
        if (
          !to &&
          !this.wxUserInfo.is_register &&
          !this.userInfo.uid &&
          !/^\/dictionary/i.test(path)
        ) {
          // if (!this.wxUserInfo.is_register && this.urlQuery.uid && !this.userInfo.uid && !/^\/(dictionary|classlist)/i.test(path)) {
          this.setLoginThenPath(path);
          return this.toLogin();
        }
        if (path === '/exchange' && this.userInfo.phone === '') {
          this.$notify({
            type: 'success',
            background: '#ff976a',
            duration: 1500,
            message: '请先绑定手机号'
          });
          this.$router.push({
            path: '/bind',
            query: {
              form: '/exchange'
            }
          });
          return false;
        }
        if (path === '/bind' && this.userInfo.phone !== '') {
          return this.$router.push({
            path: '/bind',
            query: {
              changePhone: true
            }
          });
        }
        this.setLoginThenPath('');
        this.$router.push(path);
      },

      // logout
      logout() {
        this.$toast.success('你已退出登录');
        this.setUserInfo({});
        this.setWxUserInfo({});
        this.setIsLogin(false);
        this.$emit('logout');
      },

      //退出登录
      logOutEvent() {
        if (!this.isComponent) {
          return this.logout();
        }
        this.$dialog
          .confirm({
            title: '退出登录',
            message: '确认退出登录吗？'
          })
          .then(() => {
            // on confirm
            this.logout();
          })
          .catch(() => {
            // on cancel
          });
      }
    }
  };
</script>

<style scoped lang="less">

  .user-info {
    width: 16.56rem;
    background-color: #f3f3f3;

    .vipInfo {
      background-color: #fff;
      padding: 1.25rem 0.94rem 0.72rem;

      .user {
        height: 4.06rem;
        margin-bottom: 0.9rem;

        .ego {
          margin-right: 0.56rem;
          width: 4rem;
          height: 4rem;
          border-radius: 50%;
        }

        .name {
          line-height: 1;

          .username {
            font-size: 1rem;
            color: #333;
          }

          .Uid {
            font-size: 0.75rem;
            color: #bbb;
          }
        }
      }

      .openVip {
        padding: 0.72rem 0.5rem;
        background: url(../../../static/images/mipmap_xhdpi/personal_bg_vip.png) no-repeat top left / 100% 100%;

        .crown {
          font-size: 0.84rem;
          line-height: 0.81rem;
          color: #f1d5bd;

          .ico {
            width: 0.94rem;
            height: 0.81rem;
            margin-right: 0.25rem;
          }
        }

        .remark {
          margin-top: 0.44rem;
          font-size: 0.75rem;
          color: #ecdbc0;
        }

        .vipButton {
          right: 0.5rem;
          width: 4.06rem;
          height: 1.44rem;
          line-height: 1.42rem;
          background-image: linear-gradient(90deg, #fe8655, #fc5368);
          border-radius: 0.72rem;
          font-size: 0.75rem;
          color: #fff;
        }
      }
    }

    .my {
      margin: 0.63rem 0 5.63rem;
      width: 15.94rem;
      line-height: 2.94rem;
      font-size: 0.94rem;
      color: #222;

      .item {
        padding-left: 2.69rem;
        height: 2.94rem;
        background-color: #fff;

        & + .item {
          margin-top: 0.03rem;
        }
      }

      .ico {
        left: 0.94rem;
        width: 1.13rem;
      }
    }

    .logOutBtn {
      width: 15.94rem;
      height: 2.94rem;
      line-height: 2.94rem;
      background-color: #fff;
      font-size: 0.94rem;
      color: #ff8611;
    }

    &.false {
      width: 100%;
      .logOutBtn {
        width: 100%;
      }
      .my {
        margin-bottom: 1.25rem;
        width: 100%;
        .item {
          + .item {
            margin-top: 0;
            .item-name {
              border-top: .06rem solid #f3f3f3;
            }
          }
          &.has-top {
            margin-top: .5rem;
          }
          &:before {
            content: '';
            float: right;
            width: .65rem;
            height: .65rem;
            transform: translate(-1.5rem, 1.13rem) rotate(-45deg);
            border: #666 solid .06rem;
            border-top: 0;
            border-left: 0;
          }
        }
      }
    }
  }
</style>
